<!DOCTYPE html>
<title>Test that the cue is not styled when video is in a shadow tree and style is in a document.</title>
<script src="../media-controls.js"></script>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<style>
video::cue(.red, .red2) { color:red }
video::cue(.green) { color:green }
</style>
<div id='host'>
</div>
<script>
async_test(function(t) {
    var host = document.getElementById('host');
    var shadowRoot = host.attachShadow({mode: 'open'});
    shadowRoot.innerHTML = '<video controls ><track src="captions-webvtt/styling-lifetime.vtt" kind="captions" default></video>';
    var video = shadowRoot.querySelector('video');
    video.src = '../content/test.ogv';
    video.id = "testvideo";
    video.onseeked = t.step_func_done(function() {
        var cueNode = textTrackCueElementByIndex(video, 0).firstChild.firstElementChild;
        assert_equals(getComputedStyle(cueNode).color, "rgb(255, 255, 255)");
        cueNode = cueNode.nextElementSibling;
        assert_equals(getComputedStyle(cueNode).color, "rgb(255, 255, 255)");
        cueNode = cueNode.nextElementSibling;
        assert_equals(getComputedStyle(cueNode).color, "rgb(255, 255, 255)");
    });
    video.currentTime = 0.6;
});
</script>
